<template>
  <div class="home-box">
    <section 
      class="banner"
    >
      <Carousel
        :height="560"
        trigger="click" 
        :dots="'none'"
        autoplay
        :autoplay-speed="3000"
        ref="bannerCarousel"
        @on-change="carouselChanged"
      >
        <CarouselItem :dots="'none'" class="banner-item carousel-item1">
          <hgroup class="banner-content">
            <h1 class="banner-content-title">系统定制开发</h1>
            <p class="banner-content-text">经验丰富的开发团队，高质量按时交付，一站式商业化解决方案， 赋能科技未来</p>
            <Button type="primary" class="banner-content-btn">立即了解</Button>
          </hgroup>
        </CarouselItem>
        <CarouselItem class="banner-item carousel-item1">
          <hgroup class="banner-content">
            <h1 class="banner-content-title">系统定制开发2</h1>
            <p class="banner-content-text">经验丰富的开发团队，高质量按时交付，一站式商业化解决方案， 赋能科技未来</p>
            <Button type="primary" class="banner-content-btn">立即了解</Button>
          </hgroup>
        </CarouselItem>
        <CarouselItem class="banner-item carousel-item1">
          <hgroup class="banner-content">
            <h1 class="banner-content-title">系统定制开发3</h1>
            <p class="banner-content-text">经验丰富的开发团队，高质量按时交付，一站式商业化解决方案， 赋能科技未来</p>
            <Button type="primary" class="banner-content-btn">立即了解</Button>
          </hgroup>
        </CarouselItem>
      </Carousel>
      <!-- banner 指示器 -->
      <ul class="banner-indicators">
        <li class="banner-indicator" v-for="item in 3" :key="item">
          <button class="banner-button" ref="indicatorButton"></button>
        </li>
      </ul>
    </section>

    <section class="cards">
      <div class="cards-item">
        <div class="cards-item-num">21</div>
        <div class="cards-item-text">覆盖行业</div>
        <span class="cards-line"></span>
      </div>
      <div class="cards-item">
        <div class="cards-item-num">212</div>
        <div class="cards-item-text">一体化解决方案</div>
        <span class="cards-line"></span>
      </div>
      <div class="cards-item">
        <div class="cards-item-num">101</div>
        <div class="cards-item-text">合作伙伴</div>
        <span class="cards-line"></span>
      </div>
      <div class="cards-item">
        <div class="cards-item-num">136</div>
        <div class="cards-item-text">成功案例</div>
      </div>
    </section>

    <section class="panel">
      <p class="panel-title">专业的软件定制化开发项目管理体系</p>
      <p class="panel-sub">计算、存储、网络、安全、大数据、人工智能，普惠科技助您飞跃发展</p>
    </section>

    <section class="time-axis">
      <div class="axis-title">
        <div class="axis-title-item">
          <img src="@/assets/home_lc_bg_sw.png">
          <span>商务洽谈阶段</span>
        </div>
        <div class="axis-title-item">
          <img src="@/assets/home_lc_bg_xq.png">
          <span style="right: 25px;">需求确认阶段</span>
        </div>
        <div class="axis-title-item">
          <img src="@/assets/home_lc_bg_kf.png">
          <span style="right: 25px;">开发阶段</span>
        </div>
        <div class="axis-title-item">
          <img src="@/assets/home_lc_bg_jf.png">
          <span style="right: 10px;">交付阶段</span>
        </div>
      </div>
      <div class="axis-content">
        <div 
          class="axis-content-item" 
          ref="axisDom"
          v-for="(item, index) in axisData" 
          :key="index"
        >
          <div class="axis-content-item-item aninode leftIn" v-for="(itemText, indexText) in item" :key="indexText">
            <div class="axis-content-line">
              <span class="line"></span>
            </div>
            <span class="axis-content-text" v-if="itemText === 'UI 设 计'">
              <span style="white-space: nowrap;">UI</span>
               设 计
            </span>
            <span class="axis-content-text" v-else>
              {{ itemText }}
            </span>
          </div>
        </div>
      </div>
    </section>

    <section class="qualification">
      <p class="qualification-title">欧点资质</p>
      <p class="qualification-sub">IOS9001、高新、软著 带你一起实力见“证”</p>
      <p class="qualification-line"></p>
      <div class="qualification-cards" ref="qualificationDom">
        <Row class="qualification-cards-item aninode leftIn" style="margin-right: 20px;">
          <Col span="6">
            <img src="@/assets/home_icon_zz.png" class="qualification-cards-item-img">
          </Col>
          <Col span="18" class="qualification-cards-item-content">
            <div class="qualification-cards-item-title">
              企业资质
            </div>
            <div class="qualification-cards-item-text">
              欧点信息科技有限公司为高新技术企业，拥有IOS9001国际质量管理 体系认证证书
            </div>
          </Col>
        </Row>
        <Row class="qualification-cards-item aninode leftIn">
          <Col span="6">
            <img src="@/assets/home_icon_rj.png" class="qualification-cards-item-img">
          </Col>
          <Col span="18" class="qualification-cards-item-content">
            <div class="qualification-cards-item-title">
              软件著作
            </div>
            <div class="qualification-cards-item-text">
              8项软件著作权，覆盖制造业、房地产、新能源、电商、通信等多个行业
            </div>
          </Col>
        </Row>
      </div>
    </section>

    <section class="partners" ref="partnersDom">
      <div class="partners-cards aninode leftIn">
        <p class="partners-title">101+合作伙伴</p>
        <p class="partners-line">
          <span class="partners-line-ball"></span>
          <span class="partners-line-line"></span>
          <span class="partners-line-sub"></span>
        </p>
        <p class="partners-sub">专注于软件定制化开发，从成立至今服务了包括中国移动、中国电信、中国联通、建设银行、 浦发银行、同济大学、上海电气集团、上海航天等100多家企事业单位…</p>
      </div>
    </section>

    <section class="project" ref="projectDom">
      <p class="project-title">
        项目案例
        <img src="@/assets/home_btn_into.png" class="project-arrow" @click="jumpTo('/business-introduction')">
      </p>
      <p class="project-sub">专业、专注、专研 200+中大型品牌项目开发实施经验</p>
      
      <p class="project-line"></p>
      <Row class="project-cards aninode leftIn" style="margin-bottom: 60px;">
        <Col span="12" class="project-cards-col">
          <div class="project-cards-item">
            <img src="@/assets/home_icon_wx.png" class="project-cards-item-img">
            <p class="project-cards-item-title">
              微信活动
            </p>
            <p class="project-cards-item-line">/</p>
            <p class="project-cards-item-content">
              通过品牌定位分析、营销活动策划，量身定制图文资讯等系统化的流程 帮助中国移动和中国电信的粉丝量分别从80w增长到400w，2w+ 增长至6w+，增长率高达300%以上，助力产品转化率快速提升，营销提量
            </p>
            <p class="project-cards-item-btn">
              <img src="@/assets/home_btn_into.png" @click="jumpTo('/business-introduction')">
            </p>
          </div>
        </Col>
        <Col span="12" class="project-cards-col">
          <div class="project-cards-item">
            <img src="@/assets/home_icon_wlw.png" class="project-cards-item-img">
            <p class="project-cards-item-title">
              物联网
            </p>
            <p class="project-cards-item-line">/</p>
            <p class="project-cards-item-content">
              我司共服务过100+位合作伙伴，涉及农业、制造业、医疗、教育等 二十余个行业，并且支持CAN、串口、485、蓝牙、ZigBee、eMTC、 LPWLAN等多种协议。过去所设计的智能水务、医疗saas系统、 共享车位等物联网解决方案帮助客户进行智能化升级，驱动工作效率大幅提升
            </p>
          </div>
        </Col>
      </Row>
      <Row class="project-cards aninode leftIn">
        <Col span="12" class="project-cards-col">
          <div class="project-cards-item">
            <img src="@/assets/home_icon_yd.png" class="project-cards-item-img">
            <p class="project-cards-item-title">
              移动端开发
            </p>
            <p class="project-cards-item-line">/</p>
            <p class="project-cards-item-content">
              支持多端定制，满足不同用户的不同需求。在实习升项目中共有APP端、 PC端、教师端、学生端、微信端等共7个入口，虽然 入口较多，但数据相通，同步性好 
            </p>
          </div>
        </Col>
        <Col span="12" class="project-cards-col">
          <div class="project-cards-item">
            <img src="@/assets/home_icon_xt.png" class="project-cards-item-img">
            <p class="project-cards-item-title">
              系统定制化开发
            </p>
            <p class="project-cards-item-line">/</p>
            <p class="project-cards-item-content">
              目前我司在CRM系统、WMS系统、OMS系统、OA系统等方面都有 丰富的开发经验 
            </p>
          </div>
        </Col>
      </Row>
    </section>

    <section class="service">
      <p class="project-title">服务团队<img src="@/assets/home_btn_into.png" class="project-arrow"></p>
      <p class="project-sub">结构合理的人才梯队 缔造极致产品服务</p>
      <p class="project-line"></p>
      
      <div class="service-banner">
        <Carousel
          trigger="click"
          :dots="'outside'"
          :autoplay-speed="3000" 
          arrow="never" 
        >
          <CarouselItem class="service-banner-container">
            <div class="service-banner-item">
              <div class="service-banner-item-img">
                <img src="@/assets/home_icon_td.png">
              </div>
              <p class="service-banner-item-title">技术团队</p>
              <p class="service-banner-item-content">公司现有70人，精通JAVA、.NET、Android、iOS、H5、JS、HTML的运用及开发，其中，本科以上技术人员占总人数的85%，高级工程师 占总人数的60%，团队成员具有丰富的行业经验
              </p>
            </div>
          </CarouselItem>
          <CarouselItem class="service-banner-container">
            <div class="service-banner-item">
              <div class="service-banner-item-img">
                <img src="@/assets/home_icon_td.png">
              </div>
              <p class="service-banner-item-title">技术团队</p>
              <p class="service-banner-item-content">公司现有70人，精通JAVA、.NET、Android、iOS、H5、JS、HTML的运用及开发，其中，本科以上技术人员占总人数的85%，高级工程师 占总人数的60%，团队成员具有丰富的行业经验
              </p>
            </div>
          </CarouselItem>
          <CarouselItem class="service-banner-container">
            <div class="service-banner-item">
              <div class="service-banner-item-img">
                <img src="@/assets/home_icon_td.png">
              </div>
              <p class="service-banner-item-title">技术团队</p>
              <p class="service-banner-item-content">公司现有70人，精通JAVA、.NET、Android、iOS、H5、JS、HTML的运用及开发，其中，本科以上技术人员占总人数的85%，高级工程师 占总人数的60%，团队成员具有丰富的行业经验
              </p>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
    </section>

    <section class="cooperative">
      <p class="project-title">
        合作伙伴
        <img src="@/assets/home_btn_into.png" class="project-arrow" @click="jumpTo('/cooperative-partner')">
      </p>
      <p class="project-sub">携手共赢，与全国合作伙伴共建智造生态</p>
      <p class="project-line"></p>
      <div class="cooperative-banner">
        <Carousel
          trigger="click" 
          :dots="'none'"
          arrow="always"
        >
          <CarouselItem class="cooperative-banner-item">
            <img src="@/assets/home_logo_zgyd.png">
            <img src="@/assets/home_logo_zglt.png">
            <img src="@/assets/home_logo_zgdx.png">
            <img src="@/assets/home_logo_pfyh.png">
            <img src="@/assets/home_logo_jsyh.png">
            <img src="@/assets/home_logo_shdq.png">
          </CarouselItem>
          <CarouselItem class="cooperative-banner-item">
            <img src="@/assets/home_logo_zgyd.png">
            <img src="@/assets/home_logo_zglt.png">
            <img src="@/assets/home_logo_zgdx.png">
            <img src="@/assets/home_logo_pfyh.png">
            <img src="@/assets/home_logo_jsyh.png">
            <img src="@/assets/home_logo_shdq.png">
          </CarouselItem>
        </Carousel>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      carouselIndex1: 0,
      axisData: [['售 前 咨 询', '初 步 方 案', '商 务 确 认 '], ['项 目 团 队 组 建', '原 型 设 计', 'UI 设 计', '高 保 真 原 型 '], ['模 块 开 发', '单 元 测 试', '集 成 测 试'], ['B U G 收 集', 'B U G 修 改 ', '回 归 测 试', '正 式 服 部 署', '交 付']],
      scroll: 0,
      timer: null,
      width: 0,
      btnDom: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollPage)
    this.scrollPage()
    this.carouselChanged(0, 0)
  },
  methods: {
    scrollPage() {
      if(this.$route.path !== '/index') {
        return
      }
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(this.scroll)
      if(this.scroll > 400) {
        this.$refs.axisDom.forEach((item, index) => {
          if(!this.hasClass(item, 'animated')){
            setTimeout(() => {
              this.addClass(item, 'animated')
            }, 300 * index)
          }
        })
      }
      if(this.scroll > 1000) {
        if(this.$refs.qualificationDom !== undefined && !this.hasClass(this.$refs.qualificationDom, 'animated')){
          setTimeout(() => {
            this.addClass(this.$refs.qualificationDom, 'animated')
          }, 300)
        }
      }
      if(this.scroll > 1300) {
        if(this.$refs.partnersDom !== undefined && !this.hasClass(this.$refs.partnersDom, 'animated')){
          setTimeout(() => {
            this.addClass(this.$refs.partnersDom, 'animated')
          }, 300)
        }
      }
      if(this.scroll > 1900) {
        if(this.$refs.projectDom !== undefined && !this.hasClass(this.$refs.projectDom, 'animated')){
          setTimeout(() => {
            this.addClass(this.$refs.projectDom, 'animated')
          }, 300)
        }
      }
    },
    clickBannerIndicator(index) {
      // 点击banner指示器
      this.$refs.bannerCarousel.setActiveItem(index)
    },
    carouselChanged(oldIndex, index) {
      // banner 切换change事件
      let btns = this.$refs.indicatorButton
      for(let item of btns) {
        item.style.width = '0'
      }
      this.btnDom = btns[index]
      this.width = 0
      this.handleMouseEnter()
      this.timer = this.startInterval()
    },
    handleMouseEnter() {
      // 暂停banner指示器动画
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
        this.width = 0
      }
    },
    handleMouseLeave() {
      // 开启banner指示器动画
      this.handleMouseEnter()
      this.timer = this.startInterval()
    },
    startInterval() {
      // 定时器开启
      return setInterval(() => {
        this.width += 30 / (3000 / 100)
        this.btnDom.style.width = this.width + 'px'
        if(this.width > 30) {
          clearInterval(this.timer)
          this.btnDom.style.width = '0'
          this.width = 0
        }
      }, 100)
    },
    jumpTo(url) {
      this.$router.push(url)
    },
    addClass(element, csName) {
      // 添加class
      if(!this.hasClass(element, csName)){
        element.className += ' ' + csName
      }
    },
    hasClass(element, csName) {
      return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)'))
    }
  }
}
</script>

<style scoped>
/*动画*/
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
/*动画 over*/
/*banner*/
.banner {
  position: relative;
}
.banner-item {
  position: relative;
}
.banner-item-img {
  height: 560px;
}
.banner-content {
  position: absolute;
  left: 360px;
  top: 124px;
  color: #fff;
}
.banner-content-title {
  font-size: 40px;
  font-weight: normal;
  color: rgba(255,255,255,1);
  line-height: 56px;
}
.banner-content-text {
  width: 580px;
  font-size: 20px;
  color: rgba(255,255,255,1);
  line-height: 30px;
  margin-top: 20px;
}
.banner-content-btn {
  border-radius: 0;
  margin-top: 49px;
  width: 160px;
}
.carousel-item1 {
  background: url('../assets/banner/home_pic_banner.png') center center no-repeat;
  background-size: auto 560px;
}
.banner-indicators {
  position: absolute;
  list-style: none;
  bottom: 26px;
  left: 100%;
  transform: translateX(-100%);
  margin: 0;
  padding: 0;
  z-index: 2;
  text-align: center;
  width: 200px;
}
.banner-indicator {
  display: inline-block;
  background-color: transparent;
  margin: 12px 4px;
  cursor: pointer;
  width: 30px;
  background-color: rgba(255,255,255,0.48);
}
.banner-button {
  display: block;
  width: 0;
  height: 2px;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /*transition: .3s;*/
}
/*banner over*/
.cards {
  width: 1200px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 541px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.08);
}
.cards-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 38px 106px;
}
.cards-item-num {
  font-size: 54px;
  line-height: 75px;
  color: #333333;
}
.cards-item-num:after {
  content: '+';
  position: absolute;
  color: #999999;
  font-size: 18px;
  line-height: 25px;
}
.cards-item-text {
  font-size: 14px;
  line-height: 20px;
  color: #999999;
  white-space: nowrap;
}
.cards-line {
  position: absolute;
  right: 0;
  width: 1px;
  height: 36px;
  background-color: #E6E6E6;
}
.panel {
  width: 100%;
  text-align: center;
  margin: 191px 0 76px 0;
}
.panel-title {
  color: #333333;
  font-size: 30px;
  line-height: 42px;
  margin-bottom: 12px;
}
.panel-sub {
  color: #676767;
  font-size: 14px;
  line-height: 20px;
}
.time-axis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 480px;
  background-color: #F7F7F7;
  background: url('../assets/banner/home_pic_lc.png') center center no-repeat;
}
.axis-title {
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
}
.axis-title-item {
  position: relative;
  width: 300px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.axis-title-item img {
  width: 300px;
}
.axis-title-item span {
  width: 170px;
  position: absolute;
  right: 40px;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
}
.axis-content {
  width: 1220px;
  display: inline-flex;
  flex-direction: row;
}
.axis-content-item {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-around;
  width: 300px;
}
.axis-content-item-item {
  display: flex;
  flex-direction: column;
}
.axis-content-line {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #979797;
  margin: 0 4px 80px 4px;
}
.axis-content-line .line {
  position: absolute;
  left: 2px;
  top: 7px;
  height: 72px;
  width: 8px;
  border-left: 1px solid #979797;
}
.axis-content-text {
  display: inline-block;
  width: 15px;
  line-height: 22px;
  font-size: 16px;
  word-wrap: break-word;
}
.qualification,
.project {
  width: 100%;
  text-align: center;
  margin: 100px 0;
}
.qualification-title,
.project-title {
  color: #333333;
  font-size: 30px;
  line-height: 42px;
  margin-bottom: 12px;
}
.qualification-sub,
.project-sub {
  color: #676767;
  font-size: 14px;
  line-height: 20px;
}
.qualification-line,
.project-line {
  display: inline-block;
  width:1px;
  height:32px;
  background:rgba(230,230,230,1);
  margin: 24px 0;
}
.qualification-cards {

}
.qualification-cards-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 590px;
  height: 160px;
  background: rgba(250,250,250,1);
  border: 1px solid rgba(230,230,230,1);
  padding: 0 47px 0 0;
}
.qualification-cards-item-img {
  width: 48px;
}
.qualification-cards-item-content {
  text-align: left;
}
.qualification-cards-item-title {
  font-size: 24px;
  color: rgba(51,51,51,1);
  line-height: 33px;
  margin-bottom: 11px;
}
.qualification-cards-item-text {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.partners {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 440px;
  background: rgba(0,0,0,0.5);
  background: url('../assets/banner/home_pic_yj.png') center center no-repeat;
}
.partners-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:600px;
  height:280px;
  color: #fff;
  background:rgba(0,136,222,1);
  text-align: center;
  padding: 0 40px;
}
.partners-title {
  font-size: 30px;
  line-height: 42px;
  margin-bottom: 12px;
}
.partners-line {
  position: relative;
  width:600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.partners-line-ball {
  display: block;
  width:13px;
  height:13px;
  background-color: transparent;
  border-radius: 50%;
  border:2px solid rgba(255,255,255,1);
}
.partners-line-line {
  position: absolute;
  left: 0;
  width:600px;
  height:1px;
  background:rgba(255,255,255,0.2);
}
.partners-line-sub {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.2);
}
.partners-sub {
  font-size: 14px;
  line-height: 20px;
  margin-top: 33px;
}
.project-cards {
  
}
.project-title {
  text-align: center;
  position: relative;
  width: 1200px;
  margin: 12px auto;
}
.project-arrow {
  position: absolute;
  right: 0;
  top: 16px;
  width: 40px;
  cursor: pointer;
}
.project-cards-col:nth-of-type(2n+1) {
  text-align: right;
}
.project-cards-col:nth-of-type(2n) {
  text-align: left;
}
.project-cards-item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 460px;
  height: 440px;
  background:rgba(255,255,255,1);
  padding: 50px 60px;
  transition: 0.5s;
  border: 1px solid rgba(229,229,229,1);
}
.project-cards-col:nth-of-type(2n+1) .project-cards-item {
  margin-right: 20px;
}
.project-cards-col:nth-of-type(2n) .project-cards-item {
  margin-left: 20px;
}
.project-cards-item:hover {
  box-shadow:0px 8px 24px 0px rgba(0,0,0,0.1);
}
.project-cards-item-img {
  width: 128px;
}
.project-cards-item-title {
  font-size: 24px;
  color: rgba(51,51,51,1);
  line-height: 33px;
  margin-top: 43px;
}
.project-cards-item-line {
  margin: 23px 0;
  font-size: 14px;
  color: #D8D8D8;
}
.project-cards-item-content {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
  text-align: center;
}
.project-cards-item-btn {
  width: 40px;
  margin-top: 45px;
  cursor: pointer;
}
.project-cards-item-btn img {
  width: 100%;
}
.service {
  width: 100%;
  background: rgba(245,245,245,1);
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-banner {
  width: 1200px;
  height: auto;
}
.service-banner-container {
  display: flex;
  justify-content: center;
}
.service-banner-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 860px;
  height: 300px;
  margin-top: 104px;
  background: #fff;
  padding: 0 170px;
}
.service-banner-item-img {
  position: absolute;
  top: -104px;
  width: 200px;
  height: 200px;
  background: rgba(230,230,230,1);
  border: 4px solid rgba(255,255,255,1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-banner-item-img img {
  width: 100px;
}
.service-banner-item-title {
  margin: 116px 0 50px 0;
  font-size: 24px;
  color: rgba(51,51,51,1);
  line-height: 33px;
}
.service-banner-item-content {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.cooperative {  
  width: 100%;
  background-color: #fff;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cooperative-banner {
  width: 1300px;
}
.cooperative-banner-item {
  width: 1220px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
}
.cooperative-banner-item img {
  width: 170px;
  margin: 0 40px 0 0;
}
.cooperative-banner-item img:last-of-type {
  margin-right: 0;
}
</style>
